<template>
	<view class="page">
		<view class="lb">
			<swiper class="swiper" :circular="true" :autoplay="true" :interval="8000" :duration="200"
				style="height: 970rpx;" @change="lbChange">
				<swiper-item class="swiper-items" v-for="item,index in lbList" :key="index" @tap="toLbDetails(item.route,item.type)">
					<image class="image" style="width: 100%; height: 100%;" :src="item.path" mode="scaleToFill"></image>
				</swiper-item>
			</swiper>
			<view class="points">
				<view class="items">
					<view v-for="(a,b) in lbList.length" :key="b" :class="pidx===b?'active':''"></view>
				</view>
			</view>
			<view class="menus">
				<view v-for="(item,index) in menus1" :key="index" @tap="toTurn(item.path)">
					<image :src="item.img"></image>
					<text>{{item.title}}</text>
					<view class="m_rmtp" v-if="index==0">
						<view>热门套票</view>
					</view>
				</view>
			</view>
		</view>
		<view class="content" :class="{'Doublactive': !gonggaoshow}">
			<view class="noticebar" v-if="gonggaoshow" @click="gonggaoshowPop">
				<u-notice-bar :text="textlb" speed="40" color='#404956' bgColor='transparent'
					fontSize='28'></u-notice-bar>
			</view>

			<view class="c_menus">
					<view class="scroll-list">
						<view class="scroll-list__goods-item" v-for="(item, index) in menus2" :key="index"
							:class="[(index === 9) && 'scroll-list__goods-item--no-margin-right']"
							@click="toTurn(item.path,item.text)">
							<image :src="item.img"></image>
							<text>{{item.text}}</text>
						</view>
					</view>
			</view>
			<view class="c_tabs">
				<view v-for="(item,index) in tabList" :key="index" @tap="changeTab(item,index)"
					>
					<image class="ct_aimg" :src="item.activeImg"></image>
				</view>
			</view>
			<view class="c_list">
				<view class="cl_left">
					<!-- 左侧轮播 -->
					<view class="cll_lb">
						<swiper class="swiper" :indicator-dots="true" indicator-active-color="#fff"
							indicator-color="rgba(255,255,255,.5)" :autoplay="true" :interval="8000" :circular="true"
							:duration="200" style="height: 492rpx;">
							<swiper-item class="swiper-items" v-for="item,index in rmtjLeftLb" @tap="toLbDetails(item.route,item.type)">
								<image class="image" style="width: 100%; height: 100%;" :src="item.path"
									mode="scaleToFill"></image>
							</swiper-item>
						</swiper>
					</view>

					<view class="cl_card" v-for="(item,index) in leftList" :key="index" @tap="toDetails(item)">
						<view class="image">
							<image :src="item.coverImg" mode="widthFix"></image>
						</view>
						<view class="clc_info">
							<view class="clci_name">{{item.name}}</view>
							<view class="clci_price" v-if="item.price">
								<!-- item.isBuy !='0' -->
								<view v-if="item.price>'0'||item.type==2">
									<block v-if="item.price!='0'">
										<span class="cp_s1">￥</span><text>{{item.price}}</text><span
											class="cp_s2">起</span>
										<span v-if="item.isBuy =='0'" class="cp_s1" style="margin: 0 12rpx;">线下买票</span>
									</block>
									<!-- <block v-else><text>免费1111</text></block> -->
								</view>
								<block v-else><text>免费</text></block>
							</view>
						</view>
						<view class="clc_type" v-if="[0,1,2,3].includes(tidx)&&tidx!=1">{{typeCfg[item.type]||''}}
						</view>
						<view class="clc_type" v-else>{{strategyCfg[item.strategyType]||''}}</view>
					</view>
				</view>
				<view class="cl_right" :style="{'margin-top':(tidx!==0?(-14):0)+'rpx'}">
					<view class="clr_lb" v-if="tidx===0" @tap="toTurn('/pagesTrip/referralRanking/index')">
						<image class="clr_s_kbb" :src="kbbImgs[kbbIdx]"></image>
						<view class="clrl_swiper" v-if="rmtjRightLb&&rmtjRightLb.length>0">
							<swiper class="swiper" :autoplay="true" :interval="8000" :circular="true" :duration="200"
								style="height: 324rpx;" @change="kbbChange">
								<swiper-item class="swiper-items" v-for="item,index in rmtjRightLb">
									<view class="clr_s_items">
										<view v-for="(pre,idx) in item.list" :key="idx">
											<view class="csi_img" v-if="pre.img" :style="{'background-image':'url('+pre.img+')'}">
												<view class="csii_no">No.{{idx+1}}</view>
											</view>
											<view class="csi_info">
												<text>{{pre.name}}</text>
												<view class="island">
													<image src="https://i.ringzle.com/file/20240517/192ad6fc919a4d8ab162580ac027b752.png"></image>
													<text>{{pre.island}}</text>
												</view>
											</view>
										</view>
									</view>
								</swiper-item>
							</swiper>
						</view>
					</view>
					<view class="cl_card" v-for="(item,index) in rightList" :key="index" @tap="toDetails(item)">
						<view class="image">
							<image :src="item.coverImg" mode="widthFix"></image>
						</view>
						<view class="clc_info">
							<view class="clci_name">{{item.name}}</view>

							<view class="clci_price" v-if="item.price">
								<!-- item.isBuy !='0' -->
								<view v-if="item.price>'0'||item.type==2">
									<block v-if="item.price!='0'">
										<span class="cp_s1">￥</span><text>{{item.price}}</text><span
											class="cp_s2">起</span>
										<span v-if="item.isBuy =='0'" class="cp_s1" style="margin: 0 12rpx;">线下买票</span>
									</block>
								</view>
								<block v-else><text>免费</text></block>
							</view>
						</view>
						<view class="clc_type" v-if="[0,1,2,3].includes(tidx)&&tidx!=1">{{typeCfg[item.type]||''}}
						</view>
						<view class="clc_type" v-else>{{strategyCfg[item.strategyType]||''}}</view>
					</view>
				</view>
			</view>
		</view>


		<u-modal :show="showPop" title="公告" @confirm="confirm" confirmColor="#007A69">
			<view class="slot-content">
				<rich-text :nodes="textlb2"></rich-text>
			</view>
		</u-modal>
		<u-popup bgColor="transparent" :duration='500' :show="showAd==1" @close="showAd=0" mode="center" :safeAreaInsetBottom="false" >
			<view style="width: 70vw;box-sizing: border-box;font-size: 0;">
				<image @click="goUrl" :src="adInfo.bannerList[0].path" style="width: 100%;" mode="widthFix"></image>
				<view class="icon_wrap">
					<u-icon @click="showAd=0" name="close-circle" color="#ffffff" size="80rpx"></u-icon>
				</view>
			</view>
		</u-popup>
		<Tabbar :tabbarIndex="0" v-if="!elderVersion"></Tabbar>
		<!-- 关怀版 -->
		<Tabbar2 :tabbarIndex="0" v-else></Tabbar2>
		<GetPhoneNumber ref="phoneNumber" @loginSuccess="loginSuccess"></GetPhoneNumber>
		<u-back-top :scrollTop="scrollTop"
			icon="https://i.ringzle.com/file/20240111/806e5dbc4cd845d2bd1650d2b434eed1.png" :mode="mode" bottom='200'
			:iconStyle="iconStyle"></u-back-top>


		<u-back-top :scrollTop="scrollTop" v-if="tidx==1" :mode="mode" bottom='300' :iconStyle="iconStyleImage">
			<view class="" style="width: 80rpx; height: 88rpx;">
				<image style="width: 88rpx; height: 88rpx;" @click="strategy()"
					src="https://i.ringzle.com/file/20240408/b9e213310f724c53b06ce3bec2a0bb4d.png" mode=""></image>
			</view>

		</u-back-top>

	</view>
</template>

<script>
	var ggTimer;
	var amapFile = require('../../utils/amap-wx.130.js');
	import Tabbar from "@/compoments/Tabbar/tabbar.vue";
	import Tabbar2 from "@/compoments/Tabbar/tabbar2.vue";
	import GetPhoneNumber from '@/compoments/Getphonenumber/index.vue'
	import login from "../../utils/login.js";
	export default {
		components: {
			Tabbar,
			Tabbar2,
			GetPhoneNumber
		},
		data() {
			return {
				elderVersion:uni.getStorageSync('elderVersion')||0,
				showPop: false,
				textlb: '',
				textlb2: '',
				gonggaoshow: false,
				goDetailId: '',
				scrollTop: 0,
				mode: 'circle',
				iconStyle: {
					width: '22rpx',
					height: '32rpx'
				},
				iconStyleImage: {
					width: '44px',
					height: '44px'
				},
				address: '',
				tianqi: '',
				lbList: [{
						path: 'https://fsy.shengsi.gov.cn/file/20240813/dc6622dfb80e41b8ae3172148490082c.png'
					}
				],
				menus1: [{
						img: 'https://i.ringzle.com/file/20240110/a6dc9b9d59ff49f2bafd8ba54ce62ba2.png',
						title: '船票+',
						path: '/pagesTrip/packageArea/index'
					},
					{
						img: 'https://i.ringzle.com/file/20240110/0addd54abf1b41f5acb72f56c54a2f75.png',
						title: '船票预订',
						path: '/pagesIndex/steamerTicket/index'
					},
					{
						img: 'https://i.ringzle.com/file/20240110/1308ff0fcbd346d1974dd232c24af7eb.png',
						title: '酒店民宿',
						path: '/pagesTrip/hotel/index'
					},
					{
						img: 'https://i.ringzle.com/file/20240110/d3d2a557bc8b4be7a62c281388997567.png',
						title: '景点门票',
						path: '/pagesTrip/scenicSpots/index'
					}
				],
				menus2: [
					{
						img: 'https://i.ringzle.com/file/20240605/6b30188e563441a389a83f2ad9af6de8.png',
						text: '出行规划',
						path: '/pagesTaxi/travelPlanning1/travelPlanning1'
					},
					{
						img: 'https://i.ringzle.com/file/20240110/ba85cae88ad94a87aff4d0674ff4f3ef.png',
						text: '租车包车',
						path: '/pagesIndex/rentalCar/index'
					},
					// {
					// 	img: 'https://i.ringzle.com/file/20240605/1879ee9f4d5a4482af406006d80eb784.png',
					// 	text: '官方推荐',
					// 	path: '/pagesTrip/custom-travel/recommendedItinerary'
					// },
					{
						img: 'https://i.ringzle.com/file/20240605/515606d5d1e74c268fee4e1ae182516c.png',
						text: '餐饮美食',
						path: '/pagesTrip/fineFood/fineFood/index'
					},

					{
						img: 'https://i.ringzle.com/file/20240605/6120fdb262314f89bb8c5dd165391910.png',
						text: '实时公交',
						path: '/pagesIndex/realTimeBus/realTimeBus',
					},
					{
						img: 'https://i.ringzle.com/file/20240605/451d1d5ea2514e80a386c50e204ce7bd.png',
						text: '渔家乐',
						path: '/pagesTrip/fishJiale2/index'
					},
					{
						img: 'https://i.ringzle.com/file/20240605/05b7b3a53324400aa845c6d57f45bc7f.png',
						text: '活动日历',
						path: '/pagesService/funActivity/funActivity'
					},
				],
				tidx: 0,
				tabList: [{
						activeImg: 'https://i.ringzle.com/file/20240111/9db776e04c684eb2aca9cfe4b8ad7f82.png',
						inactiveImg: 'https://i.ringzle.com/file/20240111/3967f80bf6f24f4dbbaaa5a61f30304c.png'
					},
				],
				rmtjLeftLb: [{
						path: 'https://i.ringzle.com/file/20240516/fb603c7966a44e87a18fea1569ef4934.png',
						route:''
					},
					{
						path: 'https://i.ringzle.com/file/20240516/84076344a0fd480ca4be98bb4a05d12e.png',
						route:''
					}
				],
				rmtjRightLb: [],
				finished: false,
				page: 1,
				limit: 4,
				resData: [],
				list: [],
				leftList: [],
				rightList: [],
				typeCfg: {
					1: '美食',
					2: '住宿',
					3: '景点',
					4: '攻略'
				},
				strategyCfg: {
					0: '景点',
					1: '美食',
					2: '住宿',
				},
				FormData: [{
					arriveDate: '', //	到达时间(yyyy-MM-dd)
					leaveDate: '', //离开时间(yyyy-MM-dd)
					limit: 10, //每页显示记录数
					page: 1, //当前页码
					name: '',
					islandId: ''
				}],
				disableTigger: true,
				
				kbbIdx: 0,
				kbbImgs: [
					'https://i.ringzle.com/file/20240117/14e39dc56fb942969f2b8bf1eb448d66.png', //住宿
					'https://i.ringzle.com/file/20240117/79f926a236124a70b34cd9841a9f2cd5.png', //景点
					'https://i.ringzle.com/file/20240117/fa2e5904d785437089a70da0a8ff90a0.png' //美食
				],
				pidx:0,
				showAd:0,
				adInfo:''
			}
		},
		onLoad() {
			this.getLbList();
			this.getRmtjLbList();
			this.getList();
			this.getKbbList();
			this.getgonggaoList();
			this.getAd();
			if(ggTimer) clearInterval(ggTimer);
			ggTimer = setInterval(()=>{
				this.getgonggaoList();
			},60000)
		},
		beforeDestroy() {
			if(ggTimer) clearInterval(ggTimer);
		},
		onHide() {
			if(ggTimer) clearInterval(ggTimer);
		},
		onReachBottom() {
			if (this.disableTigger) {
				if (this.finished) return
				this.getList();
			}
		},
		/* 用户点击右上角分享 */
		onShareAppMessage: function() {
			return {
				title: '让海岛旅游更轻松！',
				path: '/pages/index/index'
			}
		},
		/* 分享到朋友圈 */
		onShareTimeline: function() {
			return {
				title: '让海岛旅游更轻松！',
				path: '/pages/index/index'
			}
		},
		methods: {
			getLbList() {
				this.$api.get('/sys/isappletpic/queryBannerByType/18').then(res => {
					if (res.data.code === 0) {
						let list = res.data.data.bannerList.map(b=>{
							return {path:b.path,route:b.linkUri,type:b.type}
						})
						if(list.length>0) this.lbList = list;
					}
				})
			},
			goUrl(){
				this.showAd = 0
				if(this.adInfo.bannerList[0].type == 1){
					uni.navigateTo({
						url: '/pages/index/webview?url='+encodeURIComponent(this.adInfo.bannerList[0].linkUri)
					})
				}else{
					uni.navigateTo({
						url: this.adInfo.bannerList[0].linkUri
					})
				}
				this.$api.post('/sys/isappletpic/setPv',{
					"pic_id":  this.adInfo.id,
					"banner_id": this.adInfo.bannerList[0].id,
				}).then(res => {
					
				})
			},
			getAd() {
				this.$api.get('/sys/isappletpic/advInfo').then(res => {
					if (res.data.code === 0) {
						this.showAd =res.data.data.isShow
						this.adInfo = res.data.data
					}
				})
			},
			getRmtjLbList(){
				this.$api.get('/sys/isappletpic/queryBannerByType/19').then(res => {
					if (res.data.code === 0) {
						let list = res.data.data.bannerList.map(b=>{
							return {path:b.path,route:b.linkUri}
						})
						if(list.length>0) this.rmtjLeftLb = list;
					}
				})
			},
			strategy() {
				uni.navigateTo({
					url: '/pagesMy/publish/publishStrategy/publishStrategy'
				})
			},
			gonggaoshowPop() {
				this.showPop = true
			},
			confirm() {
				this.showPop = false
			},
			close() {
				this.showPop = false
			},
			kbbChange(e) {
				this.kbbIdx = e.detail.current;
			},
			onPageScroll(e) {
				this.scrollTop = e.scrollTop;
			},
			
			toTurn(url, text) {
				if (url == '/pages/shengsi/checkIn/index') {
					uni.navigateTo({
						url: '/pages/touristMap/yunyin'
					})
					return
				} else if (text && text == '海岛航旅') {
					return wx.navigateToMiniProgram({
						shortLink: '#小程序://海岛航旅/3OtLtc8wmESOAou',
						//develop开发版；trial体验版；release正式版
						envVersion: 'release'
					})
				} else if(text && text == '租车包车'){
					// return wx.navigateToMiniProgram({
					// 	shortLink: '#小程序://携程旅行订酒店机票火车汽车门票/1rXxy267Tinq60D',
					// 	envVersion: 'release'
					// })
					uni.navigateTo({
						url
					})
				} else {
					uni.navigateTo({
						url
					})
				}
			},
			toIsLand(item) {
				// this.$showToast('正在开发中...');
			},
			
			changeTab(item, index) {
				this.tidx = index;
				this.page = 1;
				this.list = this.leftList = this.rightList = [];
				this.finished = false;
				this.getList();
			},
			getgonggaoList() {
				this.$api.get('/api/notice/noticePage', {
					limit: 10,
					page: 1,
					status: 1,
				}).then(res => {
					if (res.data.msg == 'success') {
						if (res.data.data.list.length == 0) {
							this.gonggaoshow = false;
						} else {
							this.gonggaoshow = true;
							if (res.data.data.list.length == 1) {
								this.textlb = res.data.data.list[0].title;
								return this.textlb2 = res.data.data.list[0].title;
							}
							let zuhe = res.data.data.list.map((item, index, arr) => {
								let json = {};
								json.title = index + 1 + '-' + item.title;
								return json
							})
							let arr1 = []
							let arr2 = []
							zuhe.filter((item) => {
								arr1.push(item.title)
								arr2.push('<div style="margin-top:10px">'+item.title+'</div>')
							})
							let gonggaostring = arr1.join(' ')
							let gonggaostring2 = arr2.join('')

							this.textlb = gonggaostring;
							this.textlb2 = gonggaostring2;
						}

					} else {
						uni.showToast({
							title: res.data.msg
						})
					}
				})
			},

			getList() {
				this.disableTigger = false;
				//热门推荐
				let url = '/api/hotSuggest/page';
				let params = {
					page: this.page,
					limit: this.limit,
					arriveDate: new Date().Format('yyyy-MM-dd'),
					leaveDate: new Date(new Date().setDate(new Date().getDate() + 1)).Format('yyyy-MM-dd')
				}
				this.$api.get(url, params, true,true,false,false).then(res => {
					if (res.data.code === 0) {
						if (this.tidx == 1) res.data.data.list = res.data.data.list.filter(d => d.type ==
							4); //攻略推荐
						if (this.tidx == 2) res.data.data.list = res.data.data.list.filter(d => d.type ==
							2); //住宿推荐
						if (this.tidx == 3) res.data.data.list = res.data.data.list.filter(d => d.type ==
							1); //美食推荐
						this.list = [...this.list, ...res.data.data.list];
						if (res.data.data.list.length == 0) this.finished = true;
						else this.page++;

						this.leftList = this.rightList = [];
						this.list.forEach((d, i) => {
							if ((this.tidx == 0 && i % 2 == 0) || (this.tidx != 0 && i % 2 == 1)) this
								.leftList = [...this.leftList, d];
							if ((this.tidx == 0 && i % 2 == 1) || (this.tidx != 0 && i % 2 == 0)) this
								.rightList = [...this.rightList, d];
						})

						this.disableTigger = true;
					} else this.$showModal(res.data.msg);
				})
				// }
			},
			toDetails(item) {
				this.goDetailId = item.id
				// if (this.tidx === 0) {
				this.FormData[0].arriveDate = this.getDays(0);
				this.FormData[0].leaveDate = this.getDays(1);

				if (item.type == 1) { // 去美食详情
					// uni.navigateTo({
					// 	url: "/pagesTrip/fineFood/details/details?list=" + JSON.stringify(item)
					// })
					uni.navigateTo({
						url: '/pagesTrip/fineFood/details/details?caipid=' + item.id + '&msType=home'
					})
				} else if (item.type == 2) { // 去酒店详情
					uni.navigateTo({
						url: "/pagesTrip/hotel/details/index?list=" +
							JSON.stringify([{
								homestayId: item.id,
								name: item.name,
								...this.FormData[0]
							}])
					});
				} else if (item.type == 3) { //去景点详情
					uni.removeStorageSync('spid_old');
					uni.removeStorageSync('price_old');
					uni.navigateTo({
						url: "/pagesTrip/scenicSpots/spotDetail?spid=" + item.id + '&price=' + item.price +
							'&isBuy=' + item.isBuy
					})
				} else if (item.type == 4) { // 去攻略详情
					uni.navigateTo({
						url: '/pages/index/waterfall/details?id=' + item.id
					})
				}
				
			},
			getDays(day) {
				var today = new Date();
				var targetday_milliseconds = today.getTime() + 1000 * 60 * 60 * 24 * day;
				today.setTime(targetday_milliseconds); //注意，这行是关键代码
				var tYear = today.getFullYear();
				var tMonth = today.getMonth();
				var tDate = today.getDate();
				var week = today.getDay();
				tMonth = this.doHandleMonth(tMonth + 1);
				tDate = this.doHandleMonth(tDate);
				if (day == 0) {
					this.FormData[0].arriveDate = tYear + '-' + tMonth + '-' + tDate
				} else if (day == 1) {
					this.FormData[0].leaveDate = tYear + '-' + tMonth + '-' + tDate
				}
				return tYear + "-" + tMonth + "-" + tDate

			},
			doHandleMonth(month) {
				var m = month;
				if (month.toString().length == 1) {
					m = "0" + month;
				}
				return m;
			},
			lbChange(e){
				this.pidx = e.detail.current;;
			},
			toLbDetails(url,type) {
				if (!url) return
				if(uni.getStorageSync('spid_old')) uni.removeStorageSync('spid_old');
				if(uni.getStorageSync('price_old')) uni.removeStorageSync('price_old');
				if(type == 1){
					uni.navigateTo({
						url: '/pages/index/webview?url='+encodeURIComponent(url)
					})
				}else{
					uni.navigateTo({
						url: url
					})
				}
			},
			getKbbList(){
				this.$api.get('/api/rankTop/queryList?limit=10&page=1&rankTop=1').then(res=>{
					if(res.data.code===0){
						if(res.data.data){
							let temp = new Array(3);
							let hotelList = res.data.data.homestayList.map((d,i)=>{
								if(i<3){
									return {
										img:d.cover.split(',')[0],
										name:d.name,
										island:d.islandName,
									}
								}
							})
							let scenicList = res.data.data.scenicList.map((d,i)=>{
								if(i<3){
									return {
										img:d.coverImage.split(',')[0],
										name:d.scenicSpotName,
										island:d.scenicName
									}
								}
							})
							let foodList = res.data.data.merchantList.map((d,i)=>{
								if(i<3){
									return {
										img:d.storeFrontPic.split(',')[0],
										name:d.name,
										island:d.islandName
									}
								}
							})
							
							temp[0] = {list:hotelList};
							temp[1] = {list:scenicList};
							temp[2] = {list:foodList};
							this.rmtjRightLb = temp;
						}
					}
				})
			}
		}
	}
</script>

<style scoped lang="less">
	.icon_wrap{
		display: flex;
		justify-content: center;
		padding: 20rpx 0;
	}
	.u-fade-enter-active {
		width: 88rpx !important;
		height: 88rpx !important;
	}

	.Doublactive {
		padding: 40rpx 20rpx 20rpx !important;
	}

	.noticebar {
		margin-bottom: 40rpx;

		::v-deep .u-icon__icon {
			color: #FF8E12 !important;
			font-size: 38rpx !important;
		}
	}

	.page {
		padding-bottom: 170rpx;
		box-sizing: border-box;

		.lb {
			width: 100%;
			height: 970rpx;
			position: relative;
			
			.points{
				width: 100%;
				height: 8rpx;
				display: flex;
				align-items: center;
				justify-content: center;
				position: absolute;
				bottom: 240rpx;
				.items{
					display: flex;
					align-items: center;
					&>view{
						width: 27rpx;
						height: 8rpx;
						border-radius: 8rpx;
						background: rgba(225, 242, 255, 0.4);
						margin-left: 10rpx;
						&.active{
							background: #007A69;
						}
						&:first-child{
							margin-left: 0;
						}
					}
				}
			}

			.menus {
				width: 100%;
				padding: 0 24rpx;
				box-sizing: border-box;
				display: flex;
				justify-content: space-around;
				flex-wrap: wrap;
				position: absolute;
				left: 0;
				bottom: 58rpx;

				&>view {
					width: 168rpx;
					height: 168rpx;
					background: rgba(255, 255, 255, 0.15);
					border-radius: 16rpx;
					display: flex;
					flex-direction: column;
					align-items: center;
					justify-content: center;
					position: relative;

					image {
						width: 64rpx;
						height: 64rpx;
					}

					&>text {
						font-size: 36rpx;
						font-family: PingFangSC, PingFang SC;
						font-weight: 400;
						color: #FFFFFF;
						margin-top: 16rpx;
					}

					.m_rmtp {
						width: 121rpx;
						height: 49rpx;
						background: url(https://i.ringzle.com/file/20240125/85316dc487f74039af6e34e536af7dc1.png) no-repeat;
						background-size: 100% 100%;
						position: absolute;
						top: -31rpx;
						left: 0;

						&>view {
							width: 100%;
							font-size: 24rpx;
							font-family: PingFang-SC, PingFang-SC;
							font-weight: bold;
							color: #FFFFFF;
							line-height: 33rpx;
							text-align: center;
						}
					}
				}
			}
		}

		.content {
			width: 100%;
			padding: 20rpx 20rpx 20rpx;
			box-sizing: border-box;
			background: #FFFFFF;
			border-radius: 32rpx 32rpx 0rpx 0rpx;
			margin-top: -31rpx;
			position: relative;
			z-index: 2;
			.c_tabs {
				margin-top: 63rpx;

					image {
						&.ct_iaimg {
							width: 148rpx;
							height: 40rpx;
						}

						&.ct_aimg {
							width: 199rpx;
							height: 78rpx;
						}
					}

					&.cti {
						display: inline;

						image {
							margin-top: 10rpx;
						}
					}
			}

			.c_list {
				margin-top: 12rpx;
				display: flex;
				justify-content: space-between;

				&>view {
					width: calc(50% - 7rpx);

					&.cl_left {
						.cll_lb {
							width: 100%;
							height: 492rpx;
						}
					}

					&.cl_right {
						.clr_lb {
							width: 100%;
							padding: 0 17rpx;
							box-sizing: border-box;
							height: 468rpx;
							background: url(https://i.ringzle.com/file/20240111/6ddceb6e25a542449146d50e0ce229b3.png) no-repeat;
							background-size: 100% 100%;
							display: flex;
							flex-direction: column;
							align-items: center;

							.clr_s_kbb {
								// width: 213rpx;
								width: 270rpx;
								height: 56rpx;
								margin-top: 25rpx;
							}

							.clrl_swiper {
								width: 100%;
								margin-top: 35rpx;
							}
						}
					}

					.cl_card {
						margin-top: 16rpx;
						background: #FFFFFF;
						// box-shadow: 0rpx 4rpx 16rpx 0rpx rgba(0,0,0,0.06);
						border-radius: 16rpx;
						position: relative;

						&>.image {
							width: 348rpx;
							// height: 348rpx;
							max-height: 440rpx;
							border-radius: 16rpx 16rpx 0 0;
							overflow: hidden;
							image{
								width: 100%;
								border-radius: 16rpx 16rpx 0 0;
							}
						}

						.clc_info {
							width: 100%;
							padding: 12rpx 20rpx;
							box-sizing: border-box;

							.clci_name {
								font-size: 36rpx;
								font-family: PingFang-SC, PingFang-SC;
								font-weight: bold;
								color: #333333;
								line-height: 50rpx;
							}

							.clci_price {
								margin-top: 12rpx;

								.cp_s1 {
									font-size: 28rpx;
									font-family: PingFangSC, PingFang SC;
									font-weight: 400;
									color: #FF4141;
								}

								text {
									font-size: 36rpx;
									font-family: PingFang-SC, PingFang-SC;
									font-weight: bold;
									color: #FF4141;
								}

								.cp_s2 {
									font-size: 28rpx;
									font-family: PingFangSC, PingFang SC;
									font-weight: 400;
									color: #ABB0B5;
								}
							}
						}

						.clc_type {
							width: 72rpx;
							height: 36rpx;
							background: rgba(24, 24, 24, .5);
							border-radius: 16rpx 0rpx 24rpx 0rpx;
							line-height: 36rpx;
							text-align: center;
							font-size: 24rpx;
							font-family: PingFangSC, PingFang SC;
							font-weight: 400;
							color: #FFFFFF;
							position: absolute;
							left: 0;
							top: 0;
						}
					}
				}
			}
		}
	}

	::v-deep .clrl_swiper .swiper-items {
		.clr_s_items {
			&>view {
				display: flex;
				margin-top: 24rpx;

				&:first-child {
					margin-top: 0;
				}

				.csi_img {
					width: 90rpx;
					height: 90rpx;
					position: relative;
					background-repeat: no-repeat;
					background-size: 100% 100%;
					border-top-left-radius: 8rpx;

					.csii_no {
						width: 56rpx;
						height: 33rpx;
						background: url(https://i.ringzle.com/file/20240111/228d61073c5d472faf75960299d9c2c0.png) no-repeat;
						background-size: 100% 100%;
						line-height: 20rpx;
						text-align: center;
						font-size: 20rpx;
						font-family: PingFang-SC, PingFang-SC;
						font-weight: bold;
						color: #6A3A13;
						position: absolute;
						top: -2rpx;
					}
				}

				.csi_info {
					width: calc(100% - 90rpx);
					padding-left: 10rpx;
					box-sizing: border-box;
					display: flex;
					flex-direction: column;
					justify-content: space-between;

					&>text {
						font-size: 28rpx;
						font-weight: 400;
						color: #333333;
						line-height: 40rpx;
					}
					
					.island{
						display: flex;
						align-items: center;
						image{
							width: 28rpx;
							height: 28rpx;
						}
						text{
							font-family: PingFangSC, PingFang SC;
							font-weight: 400;
							font-size: 24rpx;
							color: #777777;
							line-height: 24rpx;
							margin-left: 6rpx;
						}
					}
				}
			}
		}
	}
	
	::v-deep .scroll-list {
		display: grid;
		gap: 50rpx 0;
		grid-template-columns: repeat(3, 1fr);
	
		.scroll-list__goods-item {
			display: flex;
			flex-direction: column;
			align-items: center;
			justify-content: center;
	
			image {
				width: 64rpx;
				height: 64rpx;
			}
	
			text {
				font-size: 40rpx;
				font-family: PingFang-SC, PingFang-SC;
				font-weight: bold;
				color: #404956;
				margin-top: 24rpx;
			}
		}
	
		.ci_sl_item {
			padding-left: 12rpx;
	
			&>view {
				width: 150rpx;
				height: 124rpx;
				border-radius: 16rpx;
				display: flex;
				flex-direction: column;
				align-items: center;
				justify-content: center;
	
				text {
					font-size: 28rpx;
					font-family: PingFang-SC, PingFang-SC;
					font-weight: bold;
					color: #111111;
	
					&:last-child {
						font-size: 22rpx;
						font-family: PingFangSC, PingFang SC;
						font-weight: 400;
						color: #5A607C;
						margin-top: 13rpx;
					}
				}
			}
		}
	}
	
</style>